<template lang="pug">
  transition(:name="transitionName")
    v-btn( fab small v-show = "show" @click="handler")
      v-icon(:size="25") keyboard_arrow_up
</template>

<script>
import { scrollTo } from '../utils/domUtil'

export default {
  name: 'backToTop',
  props: {
    container: null,
    backPosition: {
      type: Number,
      default: 0
    },
    transitionName: {
      type: String,
      default: 'fade'
    }
  },
  data() {
    return {
      show: false

    }
  },
  watch: {
    container(v) {
      if (v) {
        v.addEventListener('scroll', () => {
          if (this.scrolling) {
            this.show = false
            return
          }
          if (v.scrollTop > 40) {
            this.show = true
          } else {
            this.show = false
          }
        })
      }
    }
  },
  methods: {
    handler() {
      if (this.container) {
        this.scrolling = true
        scrollTo(this.container, this.backPosition).finally(() => {
          this.scrolling = false
        })
      }
    }
  },
  beforeDestroy() {
    if (this.container) {
      this.container.removeEventListener('scroll')
    }
  },
  created() {

  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
</style>
